<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #map {
        width: 100vw;
        height: 100vh;
        position: relative;
      }
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
  <script src="https://webapi.amap.com/loader.js"></script>
  <script type="text/javascript">
    window._AMapSecurityConfig = {
      securityJsCode: "96511961adcea19a5d2421c16c42c08f",
    };
    AMapLoader.load({
      key: "15725800856133cc50962de369fbc49a", //申请好的Web端开发者 Key，调用 load 时必填
      version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    })
      .then((AMap) => {
        const map = new AMap.Map("map", {
          viewMode: "3D", //默认使用 2D 模式
          zoom: 11, //初始化地图层级
          center: [116.21410059210203, 40.15491377756945], //初始化地图中心点
          pitch: 30,
          terrain: true,
        });
        const startLngLat = [116.379028, 39.865042]; //起始点坐标
        const endLngLat = [116.21410059210203, 40.15491377756945]; //终点坐标
        //引入和创建驾车规划插件
        AMap.plugin(["AMap.Driving"], function () {
          const driving = new AMap.Driving({
            map: map,
          });
          //获取起终点规划线路
          driving.search(startLngLat, endLngLat, function (status, result) {
            if (status === "complete") {
              //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
              //查询成功时，result 即为对应的驾车导航信息
              console.log(result);
            } else {
              console.log("获取驾车数据失败：" + result);
            }
          });
        });
      })
      .catch((e) => {
        console.error(e); //加载错误提示
      });
  </script>
</html>
